<!-- 设置导航栏 -->
<template>
    <div class="navbar gap-1 font-set1 ">
      <router-link to="/weather">
        <div class="font-icon font-set1 cursor-pointer">
          <i class="fas fa-sun"></i>
          <p class="icon-text">新中地天气</p>
        </div>
      </router-link>
      <div class="weatherLive gap-1 font-set1" v-if="apiStore.todayWeather">
        <h4 class="city">{{ city }}</h4>
        <span class="cityWeather">{{ `实时天气：${todayWeather} ${todayTemperature}℃` }}</span>
        <span class="cityWeather">{{ `${todayWinddirection}风${todayWindpower}级` }}</span>
      </div>
      <div class="info" @click="showPopup">
        <i class="fa-solid fa-circle-info"></i>
      </div>
      <i v-if="!isAdded && $route.path !== '/weather'" class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer" @click="handleAddClick"></i>
    </div>
    <TransitionGroup>
      <div v-if="isPopupShow" class="fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black" :class="animationClass">
        <div class="p-4 bg-white self-start mt-32 max-w-screen-md">
          <h2>关于：</h2>
          <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
          <h2>如何使用：</h2>
          <p class="text-xs mb-4">
            1.点击搜索框输入你希望追踪的城市<br/>
            2.在搜索结果中选中一个城市，你将获取当地最新的天气<br/>
            3.点击右侧的＋号可以将追踪城市的天气情况保存在首页 
          </p>
          <h2>移除城市:</h2>
          <p class="text-xs">
            如果你不想在首页关注某个城市,可以通过底部的按钮删<br/>除它 
          </p>
          <button class="text-white mt-8 bg-weather-primary py-2 px-6 text-xs" @click="showPopup">关闭</button>
        </div>
      </div>
    </TransitionGroup>
  </template>
  
  <script setup>
  import { ref, TransitionGroup, onMounted, defineProps } from 'vue';
  import { useAPIStore } from '../store/ApiStore';
  import { RouterLink } from 'vue-router';
  
  let city = ref(null);
  let todayWeather = ref(null);
  let todayTemperature = ref(null);
  let todayWinddirection = ref(null);
  let todayWindpower = ref(null);
  
  const props = defineProps({
    search: {
      type: String,
      default: '',
    },
  });
  
  const apiStore = useAPIStore();
  
  const fetchAddress = async () => {
    await apiStore.fetchAddress();
    city.value = apiStore.address.city;
    console.log(apiStore.localIP, 10000);
  };
  
  const todayWeatherData = async () => {
    await apiStore.todayWeatherData();
    todayWeather.value = apiStore.todayWeather.lives[0].weather;
    todayTemperature.value = apiStore.todayWeather.lives[0].temperature;
    todayWinddirection.value = apiStore.todayWeather.lives[0].winddirection;
    todayWindpower.value = apiStore.todayWeather.lives[0].windpower;
    console.log(todayWeather.value, 123);
  };
  
  const isAdded = ref(isCityAdded());
  
  function isCityAdded() {
    const savedCities = JSON.parse(localStorage.getItem('savedCities') || '[]');
    return savedCities.some(city => city.city === props.search);
  }
  
  const addToLocalStorage = async() => {
    apiStore.inputValue=props.search;
    await apiStore.todayWeatherData();
    if (!isAdded.value) {
      const savedCities = JSON.parse(localStorage.getItem('savedCities') || '[]');
      const newCity = {
        id: Date.now(),
        adcode: apiStore.forecastWeather.forecasts[0].adcode,
        city: props.search,
        temperature:apiStore.todayWeather.lives[0].temperature
      };
  
      savedCities.push(newCity);
      localStorage.setItem('savedCities', JSON.stringify(savedCities));
  
      isAdded.value = true;
    }
  };
  
  const handleAddClick = () => {
    addToLocalStorage();
  };
  
  onMounted(fetchAddress);
  onMounted(todayWeatherData);
  
  const isPopupShow = ref(false);
  const animationClass = ref('');
  
  const showPopup = () => {
    if (isPopupShow.value) {
      animationClass.value = 'animate__animated animate__fadeOut';
      setTimeout(() => {
        isPopupShow.value = false;
        animationClass.value = '';
      }, 500);
    } else {
      isPopupShow.value = true;
      animationClass.value = 'animate__animated animate__fadeIn';
    }
  };
  </script>
  
  <style scoped>
  @import "node_modules\@fortawesome\fontawesome-free\css\all.min.css";
  
  .navbar {
    z-index: 100;
    display: flex;
    padding: 24px 160px;
    background-color: rgb(0, 102, 138);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }
  
  .font-icon {
    gap: 0.75rem;
    font-size: 1.5rem;
    line-height: 2rem;
    display: flex;
  }
  
  .icon-text {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-style: normal;
  }
  
  .weatherLive {
    display: flex;
  }
  
  .gap-1 {
    gap: 1rem;
  }
  
  .font-set1 {
    align-items: center;
    color: white;
  }
  
  .city {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-weight: inherit;
  }
  
  .cityWeather {
    font-size: .875rem;
    line-height: 1.25rem
  }
  
  .info {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  
  .fa-circle-info:hover {
    color: rgb(0, 78, 113);
  }
  
  .fa-circle-info {
    font-size: 1.25rem;
    line-height: 1.75rem;
    cursor: pointer;
    transition: color 0.7s ease;
  }
  
  .fa-plus:hover {
    color: rgb(0, 78, 113);
  }
  
  .fa-plus {
    font-size: 1.25rem;
    line-height: 1.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  </style>